<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>豆瓣仿</title>
    <link href="./imgs/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <style>
      /* reset begin */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img,
      input,
      button {
        border: none;
      }
      button,
      input {
        outline: none;
      }
      button {
        display: block;
      }
      ul {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      /* reset end */
      /* css helper begin */
      .rounded {
        border-radius: 2px;
      }
      .cursor-pointer {
        cursor: pointer;
      }
      .select-none {
        user-select: none;
      }
      .flex {
        display: flex;
      }
      .align-center {
        align-items: center;
      }
      .justify-center {
        justify-content: center;
      }
      /* css helper end */
      :root {
        --primary: #41ac52;
      }
      header {
        padding: 20px 200px;
        background-color: #edf4ed;
      }
      nav {
        display: flex;
      }
      .site-logo {
      }

      .nav-items {
        display: flex;
        align-items: center;
        margin-left: 40px;
        width: auto;
      }

      .nav-items ul {
        display: flex;
      }
      .nav-items li {
        height: 20px;
        cursor: pointer;
      }

      .nav-items li a {
        color: #007722;
      }
      .nav-items li a:hover {
        background-color: #072;
        color: #fff;
      }
      .nav-items li a:last-child {
        position: relative;
      }
      .nav-items li a img {
        position: absolute;
        top: -6px;
        right: -13px;
      }
      .nav-items li + li {
        margin-left: 20px;
      }
      .searchbar {
        margin-left: auto;
        padding-left: 6px;
        border: 1px solid #c3c3c3;
        background-color: #ffffff;
      }
      .searchbar input {
        width: 240px;
        font-size: 13px;
        background-color: #ffffff;
      }

      .searchbar input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #ccc;
        font-size: 13px;
      }
      .searchbar div {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
      }
      .global-nav {
        display: flex;
        background-color: #545652;
      }
      .global-nav-l,
      .global-nav-r {
        display: flex;
        align-items: center;
      }

      .global-nav-l ul,
      .global-nav-r ul {
        display: flex;
        align-items: center;
      }

      .global-nav-l ul a,
      .global-nav-r ul a {
        display: flex;
        align-items: center;
        display: block;
        padding: 6px 12px;
        font-size: 12px;
        color: #d5d5d5;
      }

      .global-nav-r {
        margin-left: auto;
      }
      .global-nav-r .arrow {
        position: relative;
        top: -2px;
        left: 2px;
        border-width: 3px 3px 0;
        border-color: #d5d5d5 transparent transparent transparent;
        border-style: solid dashed dashed dashed;
        width: 0;
        height: 0;
        font-size: 0;
        line-height: 0;
      }

      .article-list {
        display: flex;
        flex-direction: column;
        width: 100vw;
        padding: 8px;
      }

      .article-list-item {
        display: flex;
        flex-direction: column;
      }

      .article-list-item + .article-list-item {
        margin-top: 32px;
      }

      .user-profile {
        display: flex;
      }
      .user-name {
        margin-left: 4px;
        font-size: 12px;
      }
      .user-name span {
        font-weight: 700;
      }

      .article {
        margin: 8px 0 0 48px;
      }
      .article-title {
        color: #3377aa;
      }
      .article-desc {
        margin: 8px 0;
        color: #666;
        font-size: 12px;
        max-width: 70vw;
      }
      .article-date {
        font-size: 12px;
        color: #aaa;
      }
    </style>
  </head>
  <body>
    <div class="global-nav">
      <div class="global-nav-l">
        <ul>
          <li>
            <a href="#">豆瓣</a>
          </li>
          <li>
            <a href="#" target="_blank">读书</a>
          </li>
          <li>
            <a href="#" target="_blank">电影</a>
          </li>
          <li>
            <a href="#" target="_blank">音乐</a>
          </li>
          <li>
            <a href="#" target="_blank">同城</a>
          </li>
          <li>
            <a href="#" target="_blank">小组</a>
          </li>
          <li>
            <a href="#" target="_blank">阅读</a>
          </li>
          <li>
            <a href="#" target="_blank">FM</a>
          </li>
          <li>
            <a href="#" target="_blank">时间</a>
          </li>
          <li>
            <a href="#" target="_blank">豆品</a>
          </li>
        </ul>
      </div>
      <div class="global-nav-r">
        <ul>
          <!-- <li>
            <a href="#" target="_blank">下载豆瓣客户端</a>
          </li>
          <li>
            <a href="#" target="_blank">提醒</a>
          </li>
          <li>
            <a href="#" target="_blank">豆邮</a>
          </li>
          <li>
            <a href="#" target="_blank">
              <span>username的帐号</span>
              <span class="arrow"></span>
            </a>
          </li> -->
          <li>
            <a href="#" target="_blank">退出</a>
          </li>
        </ul>
      </div>
    </div>
    <header>
      <nav>
        <div class="site-logo">
          <img src="./imgs/logo_db.png" alt="" />
        </div>
        <div class="nav-items">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">我的豆瓣</a></li>
            <li>
              <a href="#"> 浏览发现 </a>
            </li>
            <li>
              <a href="#">
                话题广场
                <img src="./imgs/new_menu.gif" alt="new" />
              </a>
            </li>
          </ul>
        </div>
        <div class="searchbar flex align-center">
          <input type="text" placeholder="搜索你感兴趣的内容和人... " />
          <div class="cursor-pointer">
            <img src="./imgs/btnSearch.png" alt="" />
          </div>
        </div>
      </nav>
    </header>

    <div class="article-list">
       <div class="article-list-item">
        <div class="user-profile">
          <img class="user-avatar" src="./imgs/1.jpg" alt="" />
          <div class="user-name"><span>姚璐 </span>的日记：</div>
        </div>
        <div class="article">
          <div class="article-title">30岁，暗黑金卡哈卡</div>
          <div class="article-desc">
            阿建行卡号卡很快就会回卡后即可哈客家阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科
          </div>
          <div class="article-date">
            <span>2020年12月12日</span>， <span>来自热门精选</span>
          </div>
        </div>
      </div>
      <div class="article-list-item">
        <div class="user-profile">
          <img class="user-avatar" src="./imgs/1.jpg" alt="" />
          <div class="user-name"><span>姚璐 </span>的日记：</div>
        </div>
        <div class="article">
          <div class="article-title">30岁，暗黑金卡哈卡</div>
          <div class="article-desc">
            阿建行卡号卡很快就会回卡后即可哈客家阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科阿建行卡号卡很快就会回卡后即可哈客家话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科话科技啊好卡好几款黑科技好几款好卡交换机卡很快就啊好几款哈哈客家话计科
          </div>
          <div class="article-date">
            <span>2020年12月12日</span>， <span>来自热门精选</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
